<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <table-list
        ref="tableList"
        :fields="tableDataColumn"
        :pagination="true"
        :searchFunc="getList"
        border></table-list>
    </el-card>
  </div>
</template>
<script>
import { getList, getProductCategory } from '@/api/product';
import { getSupplierList } from '@/api/user';
import TableList from '@/components/TableList/index';
import CryptoJS from 'crypto-js';

export default {
  name: 'index',
  components: {
    TableList,
  },
  data() {
    return {
      getList,
      tableDataColumn: [
        {
          prop: 'id',
          searchName: 'id',
          label: 'ID',
          minWidth: '60',
          searchType: 'input',
          exact: true,
        },
        {
          prop: 'product_name',
          searchName: 'product_name',
          label: '产品名称',
          minWidth: '180',
          searchType: 'input',
          baseSeachColumn: true,
        },
        {
          prop: 'product_no',
          searchName: 'product_no',
          label: '产品编号',
          minWidth: '180',
          searchType: 'input',
          exact: true,
        },
        {
          prop: 'category.category_name',
          searchName: 'category_id',
          label: '类别',
          minWidth: '180',
          searchType: 'remoteSelect',
          searchAction: getProductCategory,
          searchKey: 'id',
          searchLabel: 'category_name',
          exact: true,
        },
        {
          prop: 'supplier.name',
          searchName: 'supplier_id',
          label: '供应商',
          minWidth: '180',
          searchType: 'remoteSelect',
          searchAction: getSupplierList,
          searchKey: 'id',
          searchLabel: 'name',
          exact: true,
        },
        {
          prop: 'remark',
          searchName: 'remark',
          label: '备注',
          minWidth: '180',
          searchType: 'input',
        },
        {
          prop: 'created_at',
          searchName: 'created_at',
          label: '创建时间',
          minWidth: '180',
          searchType: 'dateTime',
        },
        {
          label: '操作',
          searchField: false,
          render: (h, scope) => {
            return (
              <div>
                <el-button
                  size='mini'
                  type='text'
                  onClick={() => {
                    this.showDetailAction(scope.row);
                  }}>
                  使用记录
                </el-button>
              </div>
            );
          },
          fixed: 'right',
          minWidth: '160',
        },
      ],
    };
  },
  created() {},
  methods: {
    showDetailAction(row) {
      // window.open( window.location.host+'/record/list' )
      let info = row.id + '-' + new Date().getTime();
      var str = CryptoJS.enc.Utf8.parse(info);
      var res = CryptoJS.enc.Base64.stringify(str);
      let routeUrl = this.$router.resolve({
        path: '/record/list',
        query: { key: res },
      });
      window.open(routeUrl.href, '_blank');
    },
  },
};
</script>
